<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>min(), max(), clamp() Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .box {
            height: 100px;
            margin-bottom: 20px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box1 {
            width: min(50vw, 300px);
            /* 取最小值，宽度不会超过300px */
            background-color: lightblue;
        }

        .box2 {
            width: max(50vw, 200px);
            /* 取最大值，宽度至少为200px */
            background-color: lightgreen;
        }

        .box3 {
            width: clamp(300px, 50vw, 600px);
            /* 最小200px，最大400px，理想50vw */
            background-color: lightcoral;
        }
    </style>
</head>

<!-- 
min()：返回最小值，确保元素不会超过某个值。
max()：返回最大值，确保元素不会低于某个值。
clamp()：在最小值和最大值之间返回一个最合适的值，确保元素大小在合理范围内变动。 
-->

<body>
    <h1>CSS min(), max(), clamp() Example</h1>
    <div class="box box1">min(50vw, 300px)</div>
    <div class="box box2">max(50vw, 200px)</div>
    <div class="box box3">clamp(300px, 50vw, 600px)</div>
</body>

</html>